<template>
  <el-upload class="upload-torrent" drag action="/" v-if="isTorrentsEmpty" :limit="1" :multiple="false"
    accept=".torrent" :on-change="handleChange" :on-exceed="handleExceed" :auto-upload="false" :show-file-list="false">
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      将种子子拖到此处，或者点击上传。
      <!-- <div class="torrent-name" v-if="name">{{ name }}</div> -->
    </div>
  </el-upload>
  <div class="selective-torrent" v-else>
    <el-row class="torrent-info" :gutter="12">
      <el-col class="torrent-name" :span="20">
        <el-tooltip class="item" effect="dark" :content="name" placement="top">
          <span>{{ name }}</span>
        </el-tooltip>
      </el-col>
      <el-col class="torrent-actions" :span="4">
        <span @click="handleTrashClick">
          <!-- <mo-icon name="trash" width="14" height="14" /> -->
          <el-icon size="14">
            <Delete />
          </el-icon>
        </span>
      </el-col>
    </el-row>
    <TaskFiles ref="taskFilesRef" mode="ADD" :files="files" @selectionChange="handleSelectionChange"></TaskFiles>
  </div>
</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc } from "@/utils/ipcRenderer";

import { computed, nextTick, ref, watch } from 'vue';
import { useConfigStore } from "@/store/configStore.js"
import { useTaskStore } from '@/store/taskStore.js'
import TaskFiles from '../taskInfo/taskFiles.vue';
import {
  buildFileList,
  listTorrentFiles,
  bytesToSize,
  getAsBase64,
  removeExtensionDot
} from "@/utils/index.js"

import { storeToRefs } from 'pinia';

const taskFilesRef = ref()

const configStore = useConfigStore()
const { baseConfig } = storeToRefs(configStore)

console.log('baseConfig', baseConfig.value.SELECTED_ALL_FILES)

const taskStore = useTaskStore()
const { addTaskTorrents } = storeToRefs(taskStore)

const files = ref([])
const name = ref("")
const currentTorrent = ref("")
const selectedFiles = ref([])

const isTorrentsEmpty = ref(true)

const emit = defineEmits(['change'])
watch(addTaskTorrents, (fileList) => {
  console.log('watch addTaskTorrents')
  if (fileList.length === 0) {
    // 初始化
    return
  }
  const file = fileList[0]
  if (!file.raw) {
    return
  }
  console.log(file)
  ipc.invoke(ipcApiRoute.parseTorrentC, {
    path: file.raw.path
  }).then(parsedTorrent => {
    // currentTorrent.value = res

    console.log('[XDown] parsed torrent: ', parsedTorrent)
    files.value = listTorrentFiles(parsedTorrent.files)
    isTorrentsEmpty.value = false
    console.log('[XDown] parsed torrent: ', files.value)
    // 选择所有

    nextTick(() => {
      console.log(taskFilesRef.value)
      taskFilesRef.value.toggleAllSelection()
    })
    getAsBase64(file.raw, (t) => {
      name.value = file.name
      currentTorrent.value = t
      emit('change', {
        torrent: currentTorrent.value,
        selectedFileIndex: baseConfig.value.SELECTED_ALL_FILES
      })
    })
  })


})


const handleChange = (file, fileList) => {
  console.log('handleChange', fileList)
  taskStore.setTaskTorrentHandle(fileList)
}

const handleExceed = (files) => {
  console.log('handleExceed')
  const fileList = buildFileList(files[0])
  taskStore.setTaskTorrentHandle(fileList)
}

// 删除
const handleTrashClick = () => {
  taskStore.setTaskTorrentHandle([])
  isTorrentsEmpty.value = true
}

const handleSelectionChange = (val) => {
  console.log(val)
  emit('change', {
    torrent: currentTorrent.value,
    selectedFileIndex: val
  })
}
</script>

<style lang="scss" scoped>
.upload-torrent {
  width: 100%;

  .el-upload,
  .el-upload-dragger {
    width: 100%;
  }

  .el-upload-dragger {
    border-radius: 4px;
    padding: 24px;
    height: auto;
  }

  .upload-inbox-icon {
    display: inline-block;
    margin-bottom: 12px;
  }

  .torrent-name {
    margin-top: 4px;
    // font-size: $--font-size-small;
    // color: $--color-text-secondary;
    line-height: 16px;
  }
}

.selective-torrent {
  width: 100%;

  .torrent-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .torrent-info {
    margin-bottom: 15px;
    font-size: 12px;
    line-height: 16px;
  }

  .torrent-actions {
    text-align: right;
    line-height: 16px;

    &>span {
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      height: 14px;
      padding: 1px;
    }
  }
}
</style>